<template>
  <el-row :gutter="10">
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <!-- 订单信息 -->
      <OrderBasicInfo :order-data="orderData">
        <template #tool>
          <div class="flex justify-end w-full">
            <!-- <el-button>打印小票 </el-button>

            <el-button>电子合同 </el-button> -->
          </div>
        </template>
      </OrderBasicInfo>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <!-- 会员信息 -->
      <OrderMemberInfo :order-data="orderData">
        <template #tool>
          <div class="w-full flex h-32px items-center justify-end">
            ID:{{ orderData?.user?.id }} <Icon icon="ep:shop" :size="16" />
          </div>
        </template>
      </OrderMemberInfo>
    </el-col>
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
      <OrderStatusInfo :order-data="orderData">
        <template #tool>
          <div class="flex justify-end w-full">
            <!-- <el-button>打印小票 </el-button>

            <el-button>电子合同 </el-button> -->

            <el-button type="primary" @click="remark">商家备注</el-button>
          </div>
        </template>
      </OrderStatusInfo>
    </el-col>
  </el-row>
  <ContentWrap
    class="!mb-10px"
    v-if="
      (orderData?.orderReasons && orderData?.orderReasons.length) ||
      (orderData?.orderStoreReasons && orderData?.orderStoreReasons.length)
    "
  >
    <el-descriptions
      title="门店备注"
      :column="1"
      v-if="orderData?.orderStoreReasons && orderData?.orderStoreReasons.length"
    >
      <!-- 第一层 -->
      <el-descriptions-item>
        <el-text v-for="(item, index) in orderData?.orderStoreReasons" :key="index">
          {{ item.nodeName }} {{ item.creator.split(':')[1] }} (ID:{{ item.creator.split(':')[0] }})
          {{ formatDate(item.createTime) }}【<el-text type="primary">{{ item.reason }} </el-text>】
        </el-text>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="总部备注"
      :column="1"
      v-if="orderData?.orderReasons && orderData?.orderReasons.length"
    >
      <!-- 第一层 -->
      <el-descriptions-item>
        <el-text v-for="(item, index) in orderData?.orderReasons" :key="index">
          {{ item.creator.split(':')[1] }} (ID:{{ item.creator.split(':')[0] }})
          {{ formatDate(item.createTime) }}【<el-text type="primary">{{ item.reason }} </el-text>】
        </el-text>
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
  <!-- 商品信息 -->
  <OrderRefundGoodsInfo :goods-list="orderData.items">
    <template #header>
      <div class="flex items-center font-size-16px! font-600"> 还款记录 </div>
    </template>
  </OrderRefundGoodsInfo>
  <ContentWrap
    class="!mb-10px"
    v-if="
      orderData.orderRespVO2?.otherpay.length > 0 || orderData.orderRespVO2?.assetpay.length > 0
    "
  >
    <el-descriptions title="支付信息" :column="1">
      <!-- 第二层 -->
      <el-descriptions-item v-if="orderData.orderRespVO2?.otherpay.length > 0">
        <template #label><span style="color: red">实付金额: </span></template>
        <div v-for="item in orderData.orderRespVO2?.otherpay" :key="item"> {{ item }}</div>
      </el-descriptions-item>
      <el-descriptions-item v-if="orderData.orderRespVO2?.assetpay.length > 0">
        <template #label><span style="color: red">资产抵扣: </span></template>
        <div v-for="item in orderData.orderRespVO2?.assetpay" :key="item"> {{ item }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </ContentWrap>
  <OrderUpdateRemarkForm ref="updateRemarkForm" @success="getDetail" />
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import * as TradeOrderApi from '@/api/mall/trade/order'
import OrderUpdateRemarkForm from '@/views/mall/trade/order/form/OrderUpdateRemarkForm.vue'

import { useTagsViewStore } from '@/store/modules/tagsView'
import { propTypes } from '@/utils/propTypes'
import {
  OrderBasicInfo,
  OrderMemberInfo,
  OrderStatusInfo,
  OrderRefundGoodsInfo
} from '../components'

defineOptions({ name: 'TradeOrderDetail' })

const message = useMessage() // 消息弹窗

// 订单详情
const orderData = ref<TradeOrderApi.OrderVO>({})

/** 获得详情 */
const { params } = useRoute() // 查询参数
const props = defineProps({
  id: propTypes.number.def(undefined), // 订单ID
  showPickUp: propTypes.bool.def(true) // 显示核销按钮
})
const id = (params.id || props.id) as unknown as number
const getDetail = async () => {
  if (id) {
    const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易订单不存在')
      close()
    }
    orderData.value = res
  }
}
/** 各种操作 */
const updateRemarkForm = ref() // 订单备注表单 Ref
const remark = () => {
  updateRemarkForm.value?.open(orderData.value)
}
/** 关闭 tag */
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'TradeOrder' })
}

/** 初始化 **/

onMounted(async () => {
  await getDetail()
})
</script>
